<template>
	<view>
		<navbar title="系统消息" :autoBack="true"></navbar>
		<scroll-view scroll-y="true" class="scbox">
			<view class="con">
				<view class="con__box">
					<view class="con__box__item" v-for="(item,index) in list" :key='index' @click="navto('/pages/msg/list?title='+item.name)">
						<image :src="'/static/tool/'+item.icon+'.png'" class="con__box__item__icon" mode=""></image>
						<view class="con__box__item__name">
							{{item.name}}
						</view>
						<view class="con__box__item__num" v-if="item.value">
							{{item.value}}
						</view>
						<image src="/static/report/more.png" class="con__box__item__m" mode=""></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{name:'系统推送',icon:'xt',value:1,url:'',key:''},
					{name:'任务消息',icon:'rw',value:0,url:'',key:''},
					{name:'审批通知',icon:'sp',value:0,url:'',key:''},
				]
			};
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.con{
	padding: 20rpx 30rpx;
	&__box{
		padding-left: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		&__item{
			display: flex;
			align-items: center;
			padding: 30rpx 21rpx 18rpx 0;
			border-bottom: 2rpx solid #F4F6F8;
			&__name{
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #333333;
				line-height: 30rpx;
				flex: 1;
			}
			&__icon{
				width: 109rpx;
				height: 109rpx;
				margin-right: 16rpx;
			}
			&__num{
				height: 34rpx;
				background: linear-gradient(-55deg, #FF7B49, #FF582D);
				border-radius: 17rpx;
				padding: 0 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				line-height: 34rpx;
			}
			&__m{
				width: 12rpx;
				height: 22rpx;
				margin-left: 18rpx;
			}
		}
	}
}
</style>
